<template>
  <div class="responsive-demo">
    <h1 class="page-title">📱 响应式适配演示</h1>

    <!-- 设备信息卡片 -->
    <div class="card device-info-card">
      <h2>🖥️ 当前设备信息</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">设备类型：</span>
          <span class="value">{{ deviceType }}</span>
        </div>
        <div class="info-item">
          <span class="label">屏幕宽度：</span>
          <span class="value">{{ windowWidth }}px</span>
        </div>
        <div class="info-item">
          <span class="label">屏幕高度：</span>
          <span class="value">{{ windowHeight }}px</span>
        </div>
        <div class="info-item">
          <span class="label">当前断点：</span>
          <span class="value">{{ currentBreakpoint }}</span>
        </div>
        <div class="info-item">
          <span class="label">屏幕方向：</span>
          <span class="value">{{ isLandscape ? '横屏' : '竖屏' }}</span>
        </div>
      </div>
    </div>

    <!-- 设备状态卡片 -->
    <div class="card status-card">
      <h2>✅ 设备状态</h2>
      <div class="status-grid">
        <div class="status-item" :class="{ active: isMobile }">
          <span class="icon">📱</span>
          <span class="text">移动端</span>
        </div>
        <div class="status-item" :class="{ active: isTablet }">
          <span class="icon">📲</span>
          <span class="text">平板</span>
        </div>
        <div class="status-item" :class="{ active: isDesktop }">
          <span class="icon">💻</span>
          <span class="text">桌面端</span>
        </div>
      </div>
    </div>

    <!-- 响应式网格演示 -->
    <div class="card grid-demo-card">
      <h2>📐 响应式网格</h2>
      <p class="demo-desc">调整浏览器窗口大小，观察网格变化</p>
      <div class="demo-grid">
        <div class="grid-item" v-for="i in 6" :key="i">
          <div class="grid-content">
            <span class="grid-number">{{ i }}</span>
            <span class="grid-text">卡片 {{ i }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮演示 -->
    <div class="card button-demo-card">
      <h2>🔘 按钮适配</h2>
      <p class="demo-desc">移动端按钮更大，更易点击</p>
      <div class="button-group">
        <el-button type="primary" size="large">主要按钮</el-button>
        <el-button size="large">次要按钮</el-button>
        <el-button type="success" size="large">成功按钮</el-button>
      </div>
    </div>

    <!-- Vant UI 演示（仅移动端） -->
    <div class="card vant-demo-card" v-if="isMobile">
      <h2>🎨 Vant UI 组件</h2>
      <p class="demo-desc">移动端专用组件</p>
      <van-cell-group>
        <van-cell title="单元格" value="内容" is-link />
        <van-cell title="单元格" value="内容" is-link />
        <van-cell title="单元格" value="内容" is-link />
      </van-cell-group>
      <div style="margin-top: 16px;">
        <van-button type="primary" block>Vant 主要按钮</van-button>
      </div>
    </div>

    <!-- 提示信息 -->
    <div class="card tip-card">
      <h2>💡 使用提示</h2>
      <ul class="tip-list">
        <li>📱 在移动端（< 768px）会显示底部导航栏</li>
        <li>📲 在平板端（768px - 992px）布局会自动调整</li>
        <li>💻 在桌面端（> 992px）显示完整功能</li>
        <li>🔄 调整浏览器窗口大小可以实时查看效果</li>
        <li>📐 使用浏览器开发者工具可以模拟不同设备</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { useResponsive } from '@/composables/useResponsive'
import { CellGroup as VanCellGroup, Cell as VanCell, Button as VanButton } from 'vant'

const {
  windowWidth,
  windowHeight,
  isMobile,
  isTablet,
  isDesktop,
  deviceType,
  currentBreakpoint,
  isLandscape
} = useResponsive()
</script>

<style scoped>
.responsive-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
}

.card {
  margin-bottom: 20px;
}

.card h2 {
  font-size: 20px;
  color: #ff69b4;
  margin-bottom: 16px;
}

.demo-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
}

/* 设备信息 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  padding: 12px;
  background: linear-gradient(135deg, #ffeef8 0%, #fff5f7 100%);
  border-radius: 8px;
}

.info-item .label {
  font-weight: bold;
  color: #666;
}

.info-item .value {
  color: #ff69b4;
  font-weight: bold;
  margin-left: 8px;
}

/* 设备状态 */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 12px;
  transition: all 0.3s;
  opacity: 0.5;
}

.status-item.active {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: #fff;
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 154, 158, 0.3);
}

.status-item .icon {
  font-size: 32px;
}

.status-item .text {
  font-weight: bold;
}

/* 网格演示 */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.grid-item {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
}

.grid-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: #fff;
  transition: all 0.3s;
}

.grid-content:hover {
  transform: scale(1.05);
}

.grid-number {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.grid-text {
  font-size: 14px;
}

/* 按钮组 */
.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 提示列表 */
.tip-list {
  list-style: none;
  padding: 0;
}

.tip-list li {
  padding: 12px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffeef8 0%, #fff5f7 100%);
  border-radius: 8px;
  border-left: 4px solid #ff69b4;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .demo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .button-group {
    flex-direction: column;
  }

  .button-group .el-button {
    width: 100%;
  }
}

/* 小屏手机适配 */
@media (max-width: 576px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}
</style>

